<template>
<div class="mian" style="background: linear-gradient(to top,white 0%,white 15%,#DCDCDC 85%,#DCDCDC 100%); border-radius: 10px;" > 
    <div class="new">
        <el-button  type="primary" round style="height: 45px;" @click="handeAdd">
           <el-icon style="font-size: 20px; font-weight: 1000;">
            <Plus />
           </el-icon><p class="onetext" style="margin-left: 5px;">新建教学班</p>
        </el-button>
    </div>
    <div style="padding: 20px;margin: 20px;" >
        <el-row :gutter="40">
             <el-col :span="8">    
                 <el-card class="clacard" >
                    <el-row :gutter="10">
                        <el-col :span="18">
                            <router-link :to="{name: ''}">
                                <el-text class="w-150px mb-2 one" truncated style="margin-left: 13px;height: 32px;">
                                 数据科学与大数据技术2021-2023
                             </el-text>
                            </router-link>                           
                        </el-col>
                        <el-col :span="6">      
                            <el-avatar  style="margin-left: 12px;" :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />                                           
                        </el-col>
                        <el-col :span="12">
                             <el-text class="w-150px mb-2 two" truncated style="margin-left: 12px;">
                                <el-icon><OfficeBuilding /></el-icon> 计算机与控制工程学院
                             </el-text>
                        </el-col>
                        <el-col :span="6">
                             <el-text class="w-150px mb-2 two" truncated style="margin-left: 12px;">
                                <el-icon><Memo /></el-icon> 专业英语
                             </el-text>
                        </el-col>
                        <el-col :span="6">
                             <el-text class="w-150px mb-2 two" truncated style="margin-left: 12px;">
                                <el-icon><User /></el-icon> 40人
                             </el-text>
                        </el-col>
                        <el-col :span="24">
                            <el-card style="margin: 25px 0 0 0; height: 60px;border-radius: 10px;">
                                <el-row :gutter="5">
                                <el-col :span="10">
                                    <el-text class="w-150px mb-2 " truncated  style="height: 100%;padding-top: 3px;">
                                        <el-icon><MapLocation /></el-icon>所在实验室：999
                                   </el-text>
                                </el-col>
                                <el-col :span="10">
                                    <el-text class="w-150px mb-2 " truncated style="height: 100%; padding-top: 3px;">
                                        <el-icon><Avatar /></el-icon>授课教师：山鹰
                                   </el-text>
                                </el-col>
                                
                                <el-col :span="4">
                                     <div class="mb-4">
                                         <el-button  class="more"  @click="drawer = true">
                                             <el-icon><More /></el-icon>
                                         </el-button>
                                     </div>
                                         <el-drawer v-model="drawer" title="I am the title" :with-header="false">
                                             <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                                                 <el-tab-pane label="课程信息修改" name="first">
                                                    <el-form  :model="cfrom" label-width="90px">
                                                        <el-form-item label="课程名称:" >
                                                            <el-input  placeholder="请输入课程名称"  v-model="cfrom.cname" ></el-input>
                                                        </el-form-item>
                                                        <el-form-item label="专业名称:" >
                                                            <el-input placeholder="请输入专业名称" v-model="cfrom.zname" ></el-input>
                                                        </el-form-item>
                                                        <el-form-item label="课程人数:" >
                                                            <el-input placeholder="请输入课程人数" v-model="cfrom.people" ></el-input>
                                                        </el-form-item>
                                                        <el-form-item label="授课教师:">
                                                            <el-input placeholder="请输入授课教师"v-model="cfrom.teacher" ></el-input>
                                                        </el-form-item>
                                                        <el-form-item label="开始时间:">
                                                            <el-input placeholder="请输入开始时间(请输入节数)"  v-model="cfrom.stime"></el-input>
                                                        </el-form-item>
                                                        <el-form-item label="结束时间:" >
                                                            <el-input placeholder="请输入结束时间(请输入节数)"  v-model="cfrom.etime" ></el-input>
                                                        </el-form-item>
                                                        <el-form-item label="实验室编号:">
                                                            <el-input  placeholder="请输入实验室编号"  v-model="cfrom.sysno"></el-input>
                                                        </el-form-item> 
                                                        <el-form-item label="课程日期:" >
                                                            <el-date-picker v-model="cfrom.date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 100%"/>
                                                        </el-form-item>
                                                        </el-form>  
                                                 </el-tab-pane>
                                                 <el-tab-pane label="删除课程" name="second">
                                                    <el-button>删除</el-button>
                                                 </el-tab-pane>
                                             </el-tabs>
                                         </el-drawer>
                                
                                  
                                </el-col>
                            </el-row>  
                            </el-card>
                                                  
                        </el-col>
                    </el-row>
                    <el-dialog v-model="dialogFormVisible" title="信息"  width="50%"> 
    <el-form :model="nform" label-width="100px" style="padding-right: 30px;" >
      <el-form-item label="日期" >
        <el-date-picker v-model="nform.date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 100%"/>
        <!-- <el-input v-model="form.date" autocomplete="off" /> -->
      </el-form-item>
      <el-form-item label="课程名" >
        <el-input v-model="nform.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="实验室编号" >
        <el-input v-model="nform.address" autocomplete="off" />
      </el-form-item>
      <el-form-item label="实验室编号" >
        <el-input v-model="nform.address" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" >
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
                 </el-card>
             </el-col>
           
     </el-row> 
    </div>
       
</div>    
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import console from 'console';
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const drawer = ref(false)

const dialogFormVisible = ref(false)
const now =  reactive(new Date());
let nform = reactive({
  date: now.toISOString().substring(0, 10),
  name: '',
  address: '',
})

let cfrom = reactive({
    cname: '',
    zname: '',
    people: '',
    teacher:'',
    stime:'',
    etime:'',
    sysno:'',
    date: now.toISOString().substring(0, 10),
})
const handeAdd = () => {
    nform = reactive({
      date: now.toISOString().substring(0, 10),
      name: '',
      address: '',
    })
    dialogFormVisible.value = true
}
</script>

<style>
* {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
}
.new{
    padding: 20px 0 0 45px;
}
.onetext{
    color: #ffffff;
    font-size: 20px;
    font-weight: 1000;
    text-align: center;
}
.one {
    color: #ffffff;
    font-size: 20px;
    font-weight: 1000;
    margin-top: 10px;
}
.two {
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
}
.el-button.plain {
  background-color: transparent !important;
  border-color: #409EFF !important;
  color: #409EFF !important;
}
.cla{
    width: 72px;
    height: 10px;
    color:aliceblue;
    font-size: 13px;
    font-weight: 200;

    /* background-color:transparent; */
    background-color:#3326df;
    margin-top: 6px;
    margin-left: 6px;
}
.clacard{   
    margin:10px 0 30px 0;
    height: 220px; 
    background: linear-gradient(
      to top,
      white 0%,
      white 25%,
      #3326df 75%,
      #3326df 100%
    );
    border-radius: 20px;
}
.more{
     background-color: transparent; 
     color: black;
     border: none;
     font-size: 20px;
}
</style>